<template>
  <div class="app-container">
    <div class="build-container">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1" description="选择数据库源和表"></el-step>
        <el-step title="步骤 2" description="选择目标源"></el-step>
      </el-steps>

      <div v-show="active===1" class="step1">
        <Reader ref="reader"/>
      </div>
      <div v-show="active===2" class="step2">
        <Writer ref="writer"/>
      </div>

      <el-button :disabled="active===1" style="margin-top: 12px;" @click="last">上一步</el-button>
      <el-button v-show="active <= 2" type="primary" style="margin-top: 12px;margin-bottom: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import Reader from './reader'
import Writer from './writer'

export default {
  components: { Reader, Writer },
  data() {
    return {
      form: {
        databaseSource: '',
        databaseTableName: '',
        sqlQuery: '',
        splitField: '',
        whereCondition: ''
      },
      active: 1 // 当前步骤
    }
  },
  methods: {
    next() {
      // 校验数据库源和数据库表名是否为空
      if (this.active === 1) {
        const readerForm = this.$refs.reader.getData().readerForm

        if (!readerForm.datasourceId) {
          this.$message.error('请选择数据库源')
          return
        } else {
          if (!readerForm.customTableName) {
            this.$message.error('请填写自定义表名')
            return
          }
        }
        if (readerForm.columns.length === 0) {
          this.$message.error('请选择同步字段')
          return
        }
      }
      // 判断步骤是否为 2，如果是则调用 createTable 方法
      if (this.active === 2) {
        this.$refs.writer.createTable()
      }
      this.active++
    },
    last() {
      if (this.active > 1) {
        this.active--
      }
    },
    getReaderData() {
      return this.$refs.reader.getData()
    }
  }
}
</script>

<style scoped>
/* 添加样式 */
.test{
  color: red;
}
</style>
